<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑器</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./vendor/jquery.minicolors.css">
  <link rel="stylesheet" href="./vendor/style/index.css">
  
  <link rel="stylesheet" href="./css/sideBar.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/loveLoading.css">
  
  <style>
	  	/*表格默认样式*/
	  	table{border:1px solid #ccc;border-collapse:collapse;}
	  	table tr td{border:1px solid #ccc;padding:5px 10px;}
	  	table tr th{border:1px solid #ccc;padding:5px 10px;background-color:#BB7744;color:#fff;}
	  	table tr td:hover{background-color:#eee;}
	  	#delbtn>span:hover{cursor:pointer;}
	  	
	  	/*容器Div样式 任意修改*/
	  	.smartTableDiv{padding:10px;margin:20px auto;}
  </style>
</head>

<body>
	<div class="content">
		<div class="content-left">
			<div class="left-title"><a href="#">树结构管理</a></div>
			<!-- 分割线 -->
			<div class="seg"></div>
			<!-- 菜单栏导航 -->
			<div id="nav-menu-content" class="nav">
				<!-- 每一个菜单项 -->
				<div class="nav-menu">
					<div class="nav-title menu-item" value="菜单配置">菜单配置</div>
				</div>
				<div class="seg"></div>
				<!-- 
				<div class="nav-menu">
					<div class="nav-title">商品管理</div>
					<div class="nav-content">
						<a class="menu-item">商品列表</a>
						<a class="menu-item">添加商品</a>
					</div>
				</div>
				<div class="nav-menu">
					<div class="nav-title">订单管理</div>
					<div class="nav-content">
						<a href="#">订单列表</a>
						<a href="#">添加订单</a>
					</div>
				</div>
				<div class="nav-menu">
					<div class="nav-title">类目管理</div>
					<div class="nav-content">
						<a href="#">类目列表</a>
						<a href="#">添加类目</a>
					</div>
				</div>
				-->
			</div>
			<div class="seg"></div>
		</div>
		<div class="content-right">
			<!-- editor -->
			<div class="toolbar">
			  <span class="glyphicon glyphicon-share-alt undo" title='撤销' data-command="undo"></span>
			  <span class="glyphicon glyphicon-share-alt redo" title='恢复' data-command="redo"></span>
			  <i>|</i>
			  <span class="glyphicon glyphicon-object-align-vertical addNode" data-command="addNode" title='新增同级节点'></span>
			  <span class="glyphicon glyphicon-object-align-horizontal addChild" data-command="addChild" title='新增子节点'></span>
			  <i>|</i>
			  <span class="glyphicon glyphicon-trash delete" data-command="delete" title='删除'></span>
			  <i>|</i>
			  <span class="glyphicon glyphicon-object-align-right induce" data-command="induce" title='归纳'></span>
			  <span class="glyphicon glyphicon-unchecked wireFrame" data-command="wireFrame" title='线框'></span>
			  <span class="glyphicon glyphicon-comment writeData" data-command="writeData" title='信息'></span>
			  <i>|</i>
			  <select id="fontSize" class="fontSize" data-command="fontSize" title="字号">
			    <option value="10">10</option>
			    <option value="12">12</option>
			    <option value="14">14</option>
			    <option value="16">16</option>
			    <option value="18">18</option>
			    <option value="20">20</option>
			    <option value="24">24</option>
			    <option value="32">32</option>
			  </select>
			  <select id="fontFamily" class="fontFamily" data-command="fontFamily" title="字体" style="width:80px;">
			    <option value="Microsoft YaHei">微软雅黑</option>
			    <option value="宋体">宋体</option>
			    <option value="楷体">楷体</option>
			    <option value="黑体">黑体</option>
			    <option value="楷体">楷体</option>
			    <option value="隶书">隶书</option>
			    <option value="Andale Mono">Andale Mono</option>
			    <option value="Arial">Arial</option>
			    <option value="arialBlack">arialBlack</option>
			    <option value="Comic Sans Ms">Comic Sans Ms</option>
			    <option value="Sans-Serif">Sans-Serif</option>
			  </select>
			  <span class="glyphicon glyphicon-bold bold" data-command="bold" title='加粗'></span>
			  <span class="glyphicon glyphicon-italic italic" data-command="italic" title='倾斜'></span>
			  <span class="glyphicon glyphicon-font fontColor" data-command="textFill" title='字体颜色'></span>
			  <i>|</i>
			  <span class="priority" title="删除" data-command="removePriority" data-value="delete">X</span>
			  <span class="priority" title="优先级1" data-command="priority" data-value="1">1</span>
			  <span class="priority" title="优先级2" data-command="priority" data-value="2">2</span>
			  <span class="priority" title="优先级3" data-command="priority" data-value="3">3</span>
			  <span class="priority" title="优先级4" data-command="priority" data-value="4">4</span>
			  <span class="priority" title="优先级5" data-command="priority" data-value="5">5</span>
			  <i>|</i>
			  <span class="glyphicon glyphicon-zoom-in enable zoomIn" data-command="zoomIn" title='放大'></span>
			  <span class="glyphicon glyphicon-zoom-out enable zoomOut" data-command="zoomOut" title='缩小'></span>
				<i>|</i>
				<span class="glyphicon glyphicon-saved enable saved" data-command="saved" title='提交'></span>
				<span class="glyphicon glyphicon-refresh enable refresh" data-command="refresh" title='刷新'></span>
			</div>
			
			<div id="mindEditor"></div>
			<textarea id="editorNode" contenteditable="true"></textarea>
			<!-- editor -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						
					</h4>
				</div>
				<div class="modal-body" style="min-height:300px">
					<!-- 表格容器 -->
					<div class="smartTableDiv"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" 
							data-dismiss="modal">关闭
					</button>
					<button id="submit" type="button" class="btn btn-primary">
						提交更改
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

  <script src="./vendor/zrender.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="./vendor/jquery.minicolors.min.js"></script>
  <script src="./js/jquery.smartTable-2.0.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="./js/navBar.js"></script>
  <script src="./dist/app.bundle.js"></script>
</body>

</html>